<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        rgb值：
        -RGB通过三种颜色的不同浓度来调配出不同的颜色
        每一种颜色的范围在0~255之间
        语法：rgb（红色，绿色，蓝色)


        rgba:
        -就是在rgb的基础上增加了一个a表示不透明度
        1表示完全不透明  0表示完全透明 .5半透明


        16进制的rgb值：
        语法： #红色绿色蓝色
        -颜色浓度通过00-ff
        -如果颜色两位两位重复可以进行简写
        #aabbcc   #abc



        hsl值   hlsa值
        H  色相（0-360）
        S 饱和度，颜色的浓度  0%-100%
        L 亮度，颜色的亮度  0%-100%
        */
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(255,0,0);
            background-color: rgba(255,0,0,.5);
            background-color: #ff0000;
            background-color: #ffff00;
            background-color: #abc;
            background-color: rgba(20, 10, 43, 0.445)

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>